<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布订阅模式</title>
</head>
<body>
  <script>
      // 模拟vue的发布订阅 $on $emit
      // 事件触发器
      class EventEmitter {
          constructor() {
              // { 'click': [ fn1, fn2 ], 'change': [fn] }
              this.subs = Object.create(null)
          }

          // 订阅事件（注册事件）
          $on(eventType, handler) {
              this.subs[eventType] = this.subs[eventType] || []
              this.subs[eventType].push(handler)
          }

          // 发布事件（触发事件）
          $emit(eventType) {
              if(this.subs[eventType]) {
                  this.subs[eventType].forEach(handler => {
                      handler()
                  })
              }
          }
      }

      // 测试
      let em = new EventEmitter()

      em.$on('click', () => {
          console.log('click1')
      })
      em.$on('click', () => {
          console.log('click2')
      })

      em.$emit('click')
  </script>
</body>
</html>